<template>
	<view class="container">
		<!-- 发帖人信息 -->
		<view class="heart">
			<image src="/static/1.jpg" mode="aspectFill"></image>
			<ul class="title">
				<text>可爱小仙女</text>
				<text class="signature">晚睡达人</text>
			</ul>
			<uni-icons class="more" type="more-filled" size="30"></uni-icons>
		</view>
		<!-- 帖子文字部分 -->
		<view class="content">{{ content }}</view>
		<!-- 帖子图片部分 -->
		<view class="images">
			<image src="/static/10.jpg" mode="aspectFill"></image>
			<image src="/static/14.jpg" mode="aspectFill"></image>
			<image src="/static/14.jpg" mode="aspectFill"></image>
		</view>
		<view class="images">
			<image src="/static/10.jpg" mode="aspectFill"></image>
			<image src="/static/14.jpg" mode="aspectFill"></image>
			<image src="/static/14.jpg" mode="aspectFill"></image>
		</view>
		<view class="images">
			<image src="/static/10.jpg" mode="aspectFill"></image>
			<image src="/static/14.jpg" mode="aspectFill"></image>
			<image src="/static/14.jpg" mode="aspectFill"></image>
		</view>
		<!-- 帖子话题 -->
		<view class="tag">
			<text><text>#</text>心碎杂谈社</text>
			<text><text>#</text>心碎杂谈社</text>
		</view>
		<!-- 点赞与评论 -->
		<view class="bottom">
			<view class="like" @click="liked">
				<uni-icons :type="is_like ? 'heart-filled' : 'heart'" size="30" />
				<text>30</text>
			</view>
			<view class="comment" @click="toCommentPage">
				<uni-icons type="chatbubble" size="30"></uni-icons>
				<text>100</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { Ref, ref } from 'vue';

	const is_like: Ref<Boolean> = ref(false);
	const content: Ref<String> = ref('就放把大火把学屋都烧了，\n烧成另一个春天');
	
	function liked(): void {
		is_like.value = !is_like.value;
	}
	function toCommentPage(): void {
		uni.navigateTo({
			url: '/pages/index/comment/CommentView'
		});
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 10px;
		font-family: "思源黑体";
		.heart {
			display: flex;
			image {
				height: 44px;
				width: 44px;
				border-radius: 50%;
				background-color: #000;
			}
			.title {
				margin-left: 10px;
				flex: 1;
				font-weight: 800;
				font-size: 16px;
				.signature {
					display: block;
					color: $uni-text-color-grey;
					font-weight: 500;
					font-size: 12px;
				}
			}
		}
		.content {
			font-size: 15px;
			line-height: 20px;
			margin: 15px 0;
			white-space: pre-wrap;
		}
		.images {
			display: flex;
			margin-bottom: 3px;  
			image {
				flex: 1;
				height: 120px;
				width: 120px;
				margin-right: 3px;		
			}
		}
		.tag {
			margin: 20px 0;
			text {
				width: 87px;
				height: 24px;
				background-color: #dbf6ff;
				border-radius: 12px;
				font-size: 12px;
				padding: 5px;
				margin-right: 10px;
			}
			span {
				color: #56CCEE;
			}
		}
		.bottom {
			display: flex;
			view {
				display: flex;
				align-items: center;
				margin-right: 20px;
			}
		}
	}
</style>